/*
  学习目标：useState三个注意事项和一个推荐写法
*/

import { useState } from 'react';

export default function App() {
  // 1. useState可以多次调用， 声明多个状态
  const [count, setCount] = useState(99);
  // 👍推荐写法：const [状态变量名， set+驼峰变量] = useState(初始值)
  let [msg, setMsg] = useState('hello 78');

  //  3. useState可以声明任意数据类型
  const [list] = useState([1, 2, 3]);

  // 快捷键： useState
  // const [hello, setHello] = useState(99)
  // const [title, setTitle] = useState("sdf")

  return (
    <div>
      <h1>{count}</h1>
      <h2>{msg}</h2>
      <h3>{list}</h3>
      <button onClick={() => setCount(count + 1)}>点我+1</button>
      <button
        onClick={() => {
          //  2. useState依然要通过新值覆盖旧值， 更新数据, 不可变数据
          // ❌
          // msg += '~';
          setMsg(msg + '~');
        }}
      >
        点我+~
      </button>
    </div>
  );
}
